// eslint-disable-next-line no-undef
const {Stock, Sankey} = G2Plot

// 渲染股票分析图
export const renderStock = container => {
  fetch('https://gw.alipayobjects.com/os/antfincdn/qtQ9nYfYJe/stock-data.json')
  .then((data) => data.json())
  .then((data) => {
    const stockPlot = new Stock(container, {
      data,
      xField: 'trade_date',
      yField: ['open', 'close', 'high', 'low'],
      meta: {
        vol: {alias: '成交量'},
        open: {alias: '开盘价'},
        close: {alias: '收盘价'},
        high: {alias: '最高价'},
        low: {alias: '最低价'},
      },
      tooltip: {
        crosshairs: {
          // 自定义 crosshairs line 样式
          line: {style: {lineWidth: 0.5, stroke: 'rgba(0,0,0,0.25)'}},
          text: (type, defaultContent, items) => {
            let textContent
            if (type === 'x') {
              const item = items[0]
              textContent = item ? item.title : defaultContent
            } else {
              textContent = `${defaultContent.toFixed(2)}`
            }
            return {
              position: type === 'y' ? 'start' : 'end',
              content: textContent,
              // 自定义 crosshairs text 样式
              style: {fill: '#dfdfdf'},
            }
          },
          // 自定义 crosshairs textBackground 样式
          textBackground: {
            padding: [4, 8],
            style: {fill: '#363636'},
          }
        }
      }
    })

    stockPlot.render()
  })
}

// 渲染流量分析图
export const renderFlow = container => {
  const DATA = [
    {source1: '首次打开', target: '首页 UV', value: 160},
    {source1: '结果页', target: '首页 UV', value: 40},
    {source1: '验证页', target: '首页 UV', value: 10},
    {source1: '我的', target: '首页 UV', value: 10},
    {source1: '朋友', target: '首页 UV', value: 8},
    {source1: '其他来源', target: '首页 UV', value: 27},
    {source1: '首页 UV', target: '理财', value: 30},
    {source1: '首页 UV', target: '扫一扫', value: 40},
    {source1: '首页 UV', target: '服务', value: 35},
    {source1: '首页 UV', target: '活动推广', value: 25},
    {source1: '首页 UV', target: '跳失', value: 10},
    {source1: '首页 UV', target: '线下宣传', value: 30},
    {source1: '首页 UV', target: '朋友圈', value: 40},
    {source1: '首页 UV', target: '其他流向', value: 45},
  ]
  const sankey = new Sankey(container, {
    data: DATA,
    sourceField: 'source1',
    targetField: 'target',
    weightField: 'value',
    nodeWidthRatio: 0.018,
    nodePaddingRatio: 0.03,
    nodeState: {active: {style: {linewidth: 1.5}}},
    tooltip: {showTitle: true},
  })

  sankey.render()
  sankey.setState('active', datum => datum.isNode && datum.name === '首次打开')
}